<script setup>
import axios from "axios";
import ol from "@/utils/ol";
import {
  getDrawSize,
  getScaleFactor,
  getRotateFactor,
  calculateCoords,
  getUnitSize,
  pathToCoords,
  circleToCoords,
  ellipseToCoords,
  polylineToCoords,
  polygonToCoords,
  rectToCoords,
  lineToCoords,
  textToCoords,
  parseItem,
} from "@/utils/vector";
import { plot } from "@comp/ol/plotting/plotting";

let map, iDraw, plottingLayer;

const iActType = ref();
const iType = ref("None"); // 当前绘制的军标类型
const plot_geometries = ref([]); // 临时生成对象[polygon,linestring,...] 临时绘制图形使用！？
const currPlot = ref({
  // 当前绘制军标的数据{id，svgname，center（cp），ctrlPointLS, color...} // 子组件为其提供信息--plotVector->parseSVG
  id: null,
  name: "", // 记录军标对应的svg文件
  cp: null, // ctrlPoint：中心点是cp[0],后边是控制点
  scale: null,
  rotate: null,
  color: "", // 绘制军标的颜色（六种）；类型确定？
  boxWH: null, // SVG文件屏幕坐标宽高
  unit: null,
  attach: null, // 附加字体数组
  style: null,
});
const svgCoords = ref([]); // 用来保存由svg解析出来的 元素和标点
const svgData = ref(); // 选择icon的svg数据（用于绘制）
const mapUnit = ref([500, 500]); // 单位为米 [1000, 1000]
const currColor = ref("#FF0000");
const FeatureParts = ref([]); // 绘制军标的组成部分{type: 'FeatureCollection',  features: [*****]}
const strokeWidth = ref(2); // 缺省军标线宽
const iPlotSvgArr = ref({}); // 关联数组--保存所有调入的SVG数据（快速查找使用）

const initMap = () => {
  const tk = "fb854e7c9218a0d4903e4c765df3fa63";
  const baseLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      maxZoom: 18,
      url: `http://t4.tianditu.com/DataServer?T=vec_w&tk=${tk}&x={x}&y={y}&l={z}`,
      crossOrigin: "anonymous",
    }),
    name: "矢量地图",
  });
  const zjLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      maxZoom: 18,
      url: `http://t4.tianditu.com/DataServer?T=cva_w&tk=${tk}&x={x}&y={y}&l={z}`,
      crossOrigin: "anonymous",
    }),
    name: "矢量注记",
  });
  map = new ol.Map({
    view: new ol.View({
      projection: "EPSG:4326",
      center: [121.43, 37.45],
      zoom: 10,
    }),
    layers: [baseLayer, zjLayer],
    target: "map",
  });
  window.map = map;
};

const initPlottingLayer = () => {
  const defStyle = new ol.style.Style({
    fill: new ol.style.Fill({
      color: "rgba(255,0,0,0.4)",
    }),
    stroke: new ol.style.Stroke({
      color: "#e21e0a",
      width: strokeWidth.value, // 2
    }),
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: "#ff0000",
      }),
    }),
    text: new ol.style.Text({
      fill: new ol.style.Fill({
        // 文字填充色
        color: "#ff0000",
      }),
      stroke: new ol.style.Stroke({
        // 文字边界宽度与颜色
        color: "rgba(255,0,0,0)",
        width: 1,
      }),
    }),
  });

  plottingLayer = new ol.layer.Vector({
    source: new ol.source.Vector(), // ol.source.Vector 用来保存标绘
    wrapX: false,
    style: defStyle,
  });
  map.addLayer(plottingLayer);
};

const lineClick = () => {
  const obj = {
    key: "dire_bm_lxhlfsq030308",
    label: "封锁区",
    方法: "是",
  };
  selectPlot(obj.key);
};

const selectPlot = (plotID) => {
  iActType.value = plotID;
  getSVGDataByID(plotID, iPlotSvgArr.value); // 调用军标数据；// 调用plottinglayer方法，其内部使用vec的get-PlotDataEx方法
  setPlotType(plotID); // 修改plottingLayer.iType;触发draw事件绘制
};

// 根据军标名称获取SVG数据- （将数据写入vertor的svgSata中；返回SVG数据）
const getSVGDataByID = async (plotID, iPlotSvg) => {
  const plotSVG = iPlotSvg?.[plotID] || "";
  if (plotSVG) {
    svgData.value = plotSVG;
  } else {
    svgData.value = await getPlotDataEx(plotID);
    // 保存到军标数组中
    iPlotSvgArr.value[plotID] = svgData.value;
  }
};
const getPlotDataEx = (plotID) => {
  return new Promise(function (resolve) {
    axios.get("/mapres/plot/used/" + plotID + ".svg").then((res) => {
      resolve(res);
    });
  });
};

/* Method: setPlotType
 * 设置军标类型
 * 参数 pType：军标类型或军标ID
 * 返回：
 */
const setPlotType = (pType) => {
  iType.value = pType;
  iTypeWatch();
};

const iTypeWatch = () => {
  if (iType.value) {
    map.removeInteraction(iDraw);
    addInteraction();
  } else {
    map.removeInteraction(iDraw);
  }
};

const addInteraction = () => {
  let value = iType.value;
  if (!value) return; // 没有绘制样式时推出(null就返回)
  if (value.length < 4) return; // 长度不满足要求不做处理
  const geometryFunction = (coordinates, geometry) => {
    // 将地理坐标转换成屏幕坐标
    if (coordinates.length < 2) return; // 定向军标需要两个控制点（原点和方向）
    const cp1 = map.getPixelFromCoordinate(coordinates[0]); // 控制点1：中心点
    const cp2 = map.getPixelFromCoordinate(coordinates[1]); // 控制点2：方向点
    // 军标数据获取
    plot_geometries.value = getFeature([cp1, cp2], "dire", iActType.value, map);
    const geometryList = parseGeometry(plot_geometries.value); // 返回生成的geometry如：[polygon,linestring,...] 提供给下面生成geometrycollection
    // 绘制临时显示的军标
    if (!geometry) {
      geometry = new ol.geom.GeometryCollection(geometryList);
    } else {
      geometry.setGeometries(geometryList);
    }
    return geometry;
  };

  iDraw = new ol.interaction.Draw({
    type: "Circle",
    maxPoints: null,
    geometryFunction: geometryFunction,
  });
  map.addInteraction(iDraw);
  // 绘制结束事件
  iDraw.on("drawend", (evt) => {
    // 军标SVG类型绘制 【iType === 'icon' || 此类型直接在点击时处理了，这里不再处理】
    // 将标绘图形加入标绘层
    // 设置军标的线宽
    setSVGStyle(plot_geometries.value, strokeWidth.value, currColor.value);
    // 默认参数是this.plot_geometries
    geom2Featrue();
  });
};

// 添加color
const setSVGStyle = (iPlotParts, StrokeW, iColor) => {
  const len = iPlotParts.geoData.length;
  let maxWidth = 0;
  // 循环每个组成部件，查找最大线宽度值；point类型排除在外
  for (let i = 0; i < len; i++) {
    const xPart = iPlotParts.geoData[i];
    if (xPart.type.toLowerCase() !== "point") {
      const w = xPart.style.width;
      if (w) {
        if (w > maxWidth) {
          maxWidth = w;
        }
      }
    }
  } // 查找最大线宽度值-结束
  for (let i = 0; i < len; i++) {
    const xPart = iPlotParts.geoData[i];
    if (xPart.type.toLowerCase() !== "point") {
      const w = xPart.style.width;
      if (w) {
        // 如果w非null
        if (w === maxWidth) {
          plot_geometries.value.geoData[i].style.width = StrokeW;
        } else {
          plot_geometries.value.geoData[i].style.width =
            (w / maxWidth) * StrokeW;
        }
      } // 线宽设置结束

      // 军标主颜色设置
      const xFill = xPart.style.fill;
      const xStroke = xPart.style.stroke;
      if (
        xFill &&
        xFill !== "none" &&
        xFill !== "#003F98" &&
        xFill !== "#FFF000" &&
        xFill !== "#009944" &&
        xFill !== "#004097" &&
        xFill !== "#ffffff" &&
        xFill !== "#000000" &&
        xFill !== "#FF0000" &&
        xFill !== "#0000FF" &&
        xFill !== "#00FF00" &&
        xFill !== "#FF60AF"
      ) {
        plot_geometries.value.geoData[i].style.fill = iColor;
      }
      if (
        xStroke &&
        xStroke !== "none" &&
        xStroke !== "#003F98" &&
        xStroke !== "#FFF000" &&
        xStroke !== "#009944" &&
        xStroke !== "#004097" &&
        xStroke !== "#FF0000" &&
        xStroke !== "#0000FF" &&
        xStroke !== "#00FF00" &&
        xStroke !== "#FF60AF"
      ) {
        plot_geometries.value.geoData[i].style.stroke = iColor;
      }
    }
  }
};

/* Method：getFeature
 * 绘制军标，得到相应的feature坐标点；总的绘制接口点（main）
 * 参数：drawPointLs点坐标信息，drawType绘制军标类型，typeId军标ID（矢量svg_id），地图iMap
 * 返回：
 */
const getFeature = (drawPointLs, drawType, typeId, iMap) => {
  // 这里的drawPointLs是鼠标点击地图所获得的坐标（转成的屏幕坐标）
  let tID = null;
  // 调用绘制方向图标
  // 由两点控制大小与方向--生成数据写入到this.svgCoords
  parseSVG(drawPointLs, typeId); // 解析svg数据，将数据写入到svgCoords中，以便下面生成Feature
  tID = "dire_" + String(new Date().getTime()); // 获取时间标签
  currPlot.value.id = tID; // 更新当前军标的组ID
  // 数据格式{geoType:xx,geoData[{gid,type,data,style}{gid,type,data,style}]
  buildGeom(tID);
  return FeatureParts.value; // 返回新建的对象列表
};
// 添加文字旋转信息
const buildGeom = (gID, data = svgCoords.value) => {
  const geodata = []; // 保存生成的每个图元元素
  // 清空之前的this.FeatureParts数据（删除原来绘制的军标）
  if (FeatureParts.value instanceof Array) {
    FeatureParts.value.splice(0, FeatureParts.value.length);
  }
  if (data.length < 1) return; // 没有数据时不做处理
  // 循环处理所有解析的数据
  for (let i = 0; i < data.length; i++) {
    // data数据包含 {svg的path-原数据，和path上取得坐标}
    const { path, coords } = data[i];
    // 需要区分当前处理数据类型；文字需要特殊处理
    const dataType = path.tagName;
    // 生成文字处理数据
    if (dataType === "text") {
      const iText = path.innerHTML;
      const d = coords[0];
      const txtRot = coords[1][1]; // 文本的坐标中[[文字坐标x，y]，[scale，rotate]]
      const geomData = [];
      const c = map.getCoordinateFromPixel(d);
      geomData.push(c);
      geomData.push(coords[1]);
      // 字体样式样式设置
      const iFont = path.getAttribute("font-family");
      const iSize = path.getAttribute("font-size");
      let pFont = "normal ";
      if (iSize) {
        pFont = pFont + iSize + "px ";
      } else {
        pFont = pFont + "14px ";
      }
      if (iFont) {
        pFont = pFont + iFont;
      } else {
        pFont = pFont + "微软雅黑";
      }
      const iStyle = {
        txt: iText,
        font: pFont,
        fill: "#000",
        rotate: txtRot,
        stroke: null,
        width: 0,
      };
      geodata.push({
        gid: gID,
        type: "Point",
        data: geomData,
        style: iStyle,
      });
    } else {
      // 如果第一个和最后一个坐标一致，视为闭口多边形;没有填充色时，视为多边形线LineString
      if (
        coords[0][0] === coords[coords.length - 1][0] &&
        coords[0][1] === coords[coords.length - 1][1]
      ) {
        // 将屏幕坐标转换为地理坐标
        const geomData = coords.map((d) => {
          // 本模块作为功能模块，不保存map对象，直接调用父组件map
          const c = map.getCoordinateFromPixel(d);
          return [c[0], c[1]];
        });
        const iStyle = {
          fill: svgCoords.value[i].path.getAttribute("fill"),
          stroke: svgCoords.value[i].path.getAttribute("stroke"),
          width: svgCoords.value[i].path.getAttribute("stroke-width"),
        };
        geodata.push({
          gid: gID,
          type: "polygon",
          data: [geomData],
          style: iStyle,
        });
      } else {
        // 屏幕坐标转换为地理坐标
        const geomData = coords.map((d) => {
          // 本模块作为功能模块，不保存map对象，直接调用父组件map
          const c = map.getCoordinateFromPixel(d);
          return [c[0], c[1]];
        });
        // console.log(geomData)
        // 获取样式
        const iStyle = {
          fill: svgCoords.value[i].path.getAttribute("fill"),
          stroke: svgCoords.value[i].path.getAttribute("stroke"),
          width: svgCoords.value[i].path.getAttribute("stroke-width"),
        };
        geodata.push({
          gid: gID,
          type: "linestring",
          data: geomData,
          style: iStyle,
        });
      }
    }
    FeatureParts.value = { geoType: "GeometryCollection", geoData: geodata };
  }
};

/*
 * parseGeometry
 * 生成绘制方法所需的geometry数据;drawend生成GeometryCollection对象使用！
 * 参数cData(coordinate point data)通过绘制方法生成的点数据, 如：{geoType:整体类型，geoData[{gid:123,type:LineSting,data[],style:{}},...]}
 * 返回：geometries数组，每个元素是一个geometry对象（线，面等），如：[polygon,linestring,...]
 */
const parseGeometry = (cData) => {
  let geometry = null;
  const geometries = []; // 保存每个绘制图形的对象
  if (cData.geoType === "GeometryCollection") {
    for (let i = 0; i < cData.geoData.length; i++) {
      const iType = cData.geoData[i].type;
      // 获取返回结果查看是否有属性
      let iStyle = cData.geoData[i].style;
      if (!iStyle) {
        iStyle = {
          fill: null,
          stroke: currColor.value,
          width: "2px",
        };
      }
      // 根据类型设置数据（目前只有Polygon，LineString，Text
      switch (iType.toLowerCase()) {
        case "linestring": // LineString
          geometry = new ol.geom.LineString(cData.geoData[i].data);
          geometries.push(geometry);
          break;
        case "polygon": // Polygon
          geometry = new ol.geom.Polygon(cData.geoData[i].data);
          geometries.push(geometry);
          break;
        case "circle":
          const cp1 = cData.geoData[i].data[0];
          const cp2 = cData.geoData[i].data[1];
          // 求两个点的距离(半径)--可能需要进行坐标转换，转换到3857，计算长度。（坐标转换）
          const r = plot.CalLengthOfTwoPoints(cp1, cp2);
          geometry = new ol.geom.Circle(cp1, r);
          geometries.push(geometry);
          break;
        default:
      } // end switch
    } // end for
    return geometries;
  } else {
    console.log("123");
  }
};

/* Method：parseSVG(输入单个控制点模式)
 * 分析SVG数据，将个元素转换成屏幕坐标；范围在鼠标绘制区域
 * 参数：drawPointLs点坐标信息，typeId军标ID
 * 返回：新生成的图形屏幕坐标
 */
const parseSVG = (drawPointLs, typeId) => {
  let SCALE = 1; // 缩放因子,调用方法自动计算比率取得此因子--待
  let ROTATE = 0; // 旋转角度
  const NUM_POINTS = 50; // 路径分段数量
  const chkArr = ["CP", "TL", "TM", "TR", "LM", "RM", "BL", "BM", "BR"]; // 校验数据；验证basePoint是否有效
  let basePoint = "CP"; // [tl,tm,tr,lm,rm,bl,bm,br,cp中心点] // 圆点的位置说明--注意：大写
  let coordinates = null;

  // 清空svgCoords--保存所有构成SVG的点（屏幕坐标）
  svgCoords.value.splice(0, svgCoords.value.length);
  // 绘制点有效性检查
  if (!drawPointLs) return;
  // 根据文件名称获取处理信息; 文件名格式：icon_BM_110201.svg
  const paramArr = typeId.split("_");
  if (paramArr.length > 2) {
    // 有三个以上元素时，使用第二个元素为中心点；出现多于元素--编号中有“下划线”
    basePoint = paramArr[1].toUpperCase();
  } else if (paramArr.length === 2) {
    // 文件名称中不包含中心点位置；使用默认值CP
    basePoint = "CP";
  } else if (paramArr.length === 1) {
    // 只有一个文件名称是，使用CP；经过上层筛选，不可能出现！
    basePoint = "CP";
  } else {
    // 没有数据时返回
    return;
  }
  // basePoint校验
  if (chkArr.indexOf(basePoint) === -1) {
    basePoint = "CP";
  }

  // 鼠标绘制的有个点，为中心点（不同类型，可能中心位置不用，圆是中心，旗子是左下角-插旗点）
  const cp = drawPointLs[0];
  // 创建一个元素容器，用来添加svg数据
  const empty = document.createElement("div");
  empty.innerHTML = svgData.value.data;
  // 获取svg内容数据
  const svgRoot = empty.querySelector("svg");
  if (drawPointLs.length > 1) {
    // 获取鼠标绘制点框选大小（默认首个点是中心点 返回{ width: w, height: h }）
    const WH = getDrawSize(drawPointLs);
    // 获取比例因子(x方向和y方向比较大的一个)
    SCALE = getScaleFactor(WH, svgRoot); // empty.querySelector('svg')
    ROTATE = getRotateFactor(drawPointLs);
    coordinates = calculateCoords(cp, svgRoot, SCALE, basePoint); // empty.querySelector('svg')
  } else {
    //
    // 将svg数据提取出来计算，调用calculateCoords进行处理--计算左上角坐标
    const WH = getUnitSize(drawPointLs, basePoint, mapUnit.vue); // 根据给定尺寸（米），设置军标尺寸：默认左右各1000
    SCALE = getScaleFactor(WH, svgRoot);
    ROTATE = getRotateFactor(drawPointLs);
    coordinates = calculateCoords(cp, svgRoot, SCALE, basePoint); // empty.querySelector('svg')
  }
  // 将信息回馈给父组件
  const ctrlPnt = drawPointLs.map((d) => {
    // 转换成地理坐标（根据投影获取返回的坐标：如果不是3857而是4490后续可能有问题）
    const c = map.getCoordinateFromPixel(d); // 4490返回的是经纬度[116.08994635036495, 40.28763959854017]
    return [c[0], c[1]];
  });
  currPlot.value.name = typeId; // svg文件名称
  currPlot.value.cp = ctrlPnt; // drawPointLs -- ctrlpoint控制点，包含中心点
  currPlot.value.scale = SCALE;
  currPlot.value.rotate = ROTATE;
  currPlot.value.color = currColor.value; // 颜色
  currPlot.value.boxWH = null; // 暂时不支持SVG
  currPlot.value.unit = mapUnit.vue;
  currPlot.value.attach = null;
  for (let i = 0; i < svgRoot.childNodes.length; i++) {
    const tName = svgRoot.childNodes[i].tagName;
    switch (tName) {
      case "path": // 处理数据路径数据
        pathToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          NUM_POINTS, // NUM_POINTS 路径分成点数；不同类型不同数量  ?20
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );

        break;
      case "circle": // 处理圆形数据
        circleToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "ellipse": // 处理椭圆数据
        ellipseToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          NUM_POINTS, // NUM_POINTS 路径分成点数；圆18个点
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "polyline": // 处理多边形线数据
        polylineToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "polygon": // 处理多边形数据
        polygonToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "rect": // 处理矩形数据
        rectToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "line": // 处理线段数据
        lineToCoords(
          svgRoot.childNodes[i],
          SCALE, // 缩放SCALE 1
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "text": // 处理文字数据
        textToCoords(
          svgRoot.childNodes[i],
          SCALE,
          coordinates.x,
          coordinates.y,
          cp,
          ROTATE,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
      case "g": // 处理组数据
        parseItem(
          svgRoot.childNodes[i],
          coordinates.x,
          coordinates.y,
          cp,
          SCALE,
          ROTATE,
          NUM_POINTS,
          ({ path, coords }) => {
            svgCoords.value.push({ path, coords });
          }
        );
        break;
    }
  }
};

/*
 * Method：geom2Featrue
 * 将从getFeature获得的数据{geoType:x.geoData:[{gid,type,data,style},{},...]}添加到标绘层
 * 参数：gData：{geoType:x.geoData:[{gid,type,data,style},{},...]}
 */
// 带文字旋转 参数：sSRS表示数据的坐标格式（所有标绘操作都已'EPSG:3857'为准）
const geom2Featrue = (plotData = plot_geometries.value) => {
  if (!plotData) return;
  const gType = plotData.geoType;
  const gData = plotData.geoData;
  let iGeom = null;
  let iFeature = null;
  if (gType === "GeometryCollection") {
    for (let i = 0; i < gData.length; i++) {
      const gID = gData[i].gid;
      let iType = gData[i].type;
      const iData = gData[i].data;
      const iStyle = gData[i].style;
      let newStyle = null;
      iType = iType.toLowerCase();
      // 处理多边形
      if (iType === "polygon") {
        iGeom = new ol.geom.Polygon(iData);
        iFeature = new ol.Feature(iGeom);
        iFeature.set("gid", gID);
        iFeature.set("type", "PLOT");
        // 属性创建
        if (iStyle.fill === "none" || !iStyle.fill) {
          // 没有填充颜色-1
          let strokeColor = iStyle.stroke;
          if (!strokeColor) {
            // 勾边色为空，设置为当前色
            strokeColor = currColor.value;
          }
          // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
          if (
            strokeColor &&
            strokeColor !== "#003F98" &&
            strokeColor !== "#FFF000" &&
            strokeColor !== "#009944" &&
            strokeColor !== "#004097" &&
            strokeColor !== "#FF0000" &&
            strokeColor !== "#0000FF" &&
            strokeColor !== "#00FF00" &&
            strokeColor !== "#FF60AF"
          ) {
            // 有描边色
            newStyle = new ol.style.Style({
              fill: new ol.style.Fill({
                color: "rgba(0,0,0,0)",
              }),
              stroke: new ol.style.Stroke({
                color: currColor.value,
                width: iStyle.width ? iStyle.width : 0,
              }),
            });
          } else if (
            strokeColor === "#003F98" ||
            strokeColor === "#FFF000" ||
            strokeColor === "#009944" ||
            strokeColor === "#004097" ||
            strokeColor === "#FF0000" ||
            strokeColor === "#0000FF" ||
            strokeColor === "#00FF00" ||
            strokeColor === "#FF60AF"
          ) {
            // B-2 勾边为固有色，勾边色保持不变！
            newStyle = new ol.style.Style({
              fill: new ol.style.Fill({
                color: "rgba(0,0,0,0)",
              }),
              stroke: new ol.style.Stroke({
                color: strokeColor,
                width: iStyle.width ? iStyle.width : 0,
              }),
            });
          }
          // iFeature.setStyle(iStyle)
          // 样式数据写入当前绘制军标数据中（currPlot）-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
          // 原型 setCurrPlot (ID, plotName = proxy.iType, ctrlPoint = null, SCALE = 1, ROTATE = 0, COLOR = currColor.value, UNIT = null, STYLE = null)
          // 原型 setCurrPlotStyle (Fill = 'none', Stroke = null, Width = 0, LineDash = null, TEXT = null, Font = null) getText
          currPlot.value.style = null;
        } else {
          // 多边形有填充色-2
          // 多边形有填充色，非固有色。使用当前颜色2-1
          if (
            iStyle.fill !== "#003F98" &&
            iStyle.fill !== "#FFF000" &&
            iStyle.fill !== "#009944" &&
            iStyle.fill !== "#004097" &&
            iStyle.fill !== "#ffffff" &&
            iStyle.fill !== "#000000" &&
            iStyle.fill !== "#FF0000" &&
            iStyle.fill !== "#0000FF" &&
            iStyle.fill !== "#00FF00" &&
            iStyle.fill !== "#FF60AF"
          ) {
            const iFill = currColor.value;
            let strokeColor = iStyle.stroke;
            const iWidth = iStyle.width;
            // 获取勾边宽度，没有或为0，表示没有勾边
            if (iWidth === 0 || !iWidth) {
              strokeColor = null;
            }
            if (!strokeColor) {
              // 勾边色为空，只有填充；无勾边 2-1-1
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
              });
            } else if (
              strokeColor &&
              strokeColor !== "#003F98" &&
              strokeColor !== "#FFF000" &&
              strokeColor !== "#009944" &&
              iStyle.fill !== "#004097" &&
              strokeColor !== "#FF0000" &&
              strokeColor !== "#0000FF" &&
              strokeColor !== "#00FF00" &&
              strokeColor !== "#FF60AF"
            ) {
              // 有描边色
              // 有描边色，且不是固有色，替换成当前色（样式：多边形有颜色-当前色，边使用当前色）2-1-2
              // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: currColor.value,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
              // 描边色是固有色，使用固有描边色（样式：多边形有颜色-当前色，边使用固有色）2-1-3
            } else if (
              strokeColor === "#003F98" ||
              strokeColor === "#FFF000" ||
              strokeColor === "#009944" ||
              strokeColor === "#004097" ||
              strokeColor === "#FF0000" ||
              strokeColor === "#0000FF" ||
              strokeColor === "#00FF00" ||
              strokeColor === "#FF60AF"
            ) {
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: strokeColor,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
            }
          } else {
            // 填充色为固有色 2-2
            const iFill = iStyle.fill;
            let strokeColor = iStyle.stroke;
            const iWidth = iStyle.width;
            // 获取勾边宽度，没有或为0，表示没有勾边
            if (iWidth === 0 || !iWidth) {
              strokeColor = null;
            }
            if (!strokeColor) {
              // 勾边色为空，只有填充；无勾边 2-2-1
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
              });
            } else if (
              strokeColor &&
              strokeColor !== "#003F98" &&
              strokeColor !== "#FFF000" &&
              strokeColor !== "#009944" &&
              strokeColor !== "#004097" &&
              strokeColor !== "#FF0000" &&
              strokeColor !== "#0000FF" &&
              strokeColor !== "#00FF00" &&
              strokeColor !== "#FF60AF"
            ) {
              // 有描边色
              // （样式：多边形有颜色-固有色，边使用当前色）2-2-2
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: currColor.value,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
              // （样式：多边形有颜色-固有色，描边使用固有色）2-2-3
            } else if (
              strokeColor === "#003F98" ||
              strokeColor === "#FFF000" ||
              strokeColor === "#009944" ||
              strokeColor === "#004097" ||
              strokeColor === "#FF0000" ||
              strokeColor === "#0000FF" ||
              strokeColor === "#00FF00" ||
              strokeColor === "#FF60AF"
            ) {
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: strokeColor,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
            }
          }
          currPlot.value.style = null;
        }
        // 设置虚线--如果设置了style.lineDash参数需要设置虚线
        if (iStyle.lineDash) {
          const iStroke = newStyle.getStroke();
          iStroke.setLineDash(iStyle.lineDash);
        }
        // 属性添加到Featrue
        iFeature.setStyle(newStyle);
      }
      if (iType === "linestring") {
        iGeom = new ol.geom.LineString(iData);
        iFeature = new ol.Feature(iGeom);
        // 需要添加控制点属性--待添加
        iFeature.set("gid", gID);
        iFeature.set("type", "PLOT");
        // 属性创建

        let strokeColor = iStyle.stroke;
        if (!strokeColor) {
          // 勾边色为空，设置为当前色
          strokeColor = currColor.value;
        }
        // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
        if (
          strokeColor &&
          strokeColor !== "#003F98" &&
          strokeColor !== "#FFF000" &&
          strokeColor !== "#009944" &&
          strokeColor !== "#004097" &&
          strokeColor !== "#FF0000" &&
          strokeColor !== "#0000FF" &&
          strokeColor !== "#00FF00" &&
          strokeColor !== "#FF60AF" &&
          strokeColor !== "#FFFFFF" &&
          strokeColor !== "#000000" &&
          strokeColor !== "#DEB887"
        ) {
          // 有描边色
          newStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: currColor.value,
              width: iStyle.width ? iStyle.width : 2,
            }),
          });
        } else if (
          strokeColor === "#003F98" ||
          strokeColor === "#FFF000" ||
          strokeColor === "#009944" ||
          strokeColor === "#004097" ||
          strokeColor === "#FF0000" ||
          strokeColor === "#0000FF" ||
          strokeColor === "#00FF00" ||
          strokeColor === "#FF60AF" ||
          strokeColor === "#FFFFFF" ||
          strokeColor === "#000000" ||
          strokeColor === "#DEB887"
        ) {
          // B-2 勾边为固有色，勾边色保持不变！
          newStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: strokeColor,
              width: iStyle.width ? iStyle.width : 2,
            }),
          });
        }

        // 设置虚线--如果设置了style.lineDash参数需要设置虚线
        if (iStyle.lineDash) {
          console.log(iType);
          const iStroke = newStyle.getStroke();
          iStroke.setLineDash(iStyle.lineDash);
        }
        // 属性添加到Featrue
        iFeature.setStyle(newStyle);
        // 设置图形样式信息--保存数据用！-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
        currPlot.value.style = null;
      }
      if (iType === "point") {
        iGeom = new Point(iData[0]);
        iFeature = new ol.Feature(iGeom);
        iFeature.set("gid", gID);
        iFeature.set("type", "PLOT");
        let txtRot;
        if (iStyle.rotate) {
          txtRot = iStyle.rotate;
        } else {
          txtRot = 0;
        }
        // 创建样式
        newStyle = new ol.style.Style({
          text: new ol.style.Text({
            // 位置
            textAlign: "left", // 'left', 'right', 'center', 'end' or 'start'.
            // 基准线
            textBaseline: "middle", // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
            // 文字样式
            font: iStyle.font, // 默认格式 'normal 14px 微软雅黑',
            // font: 'normal' + x + 'px 微软雅黑',
            // 文本内容
            text: iStyle.txt,
            scale: iData[1][0], // 文字数据信息[[点的地理坐标x， y]，[文字的缩放*，文字的旋转]]
            rotation: txtRot,
            // 文字旋转
            // 文本填充样式（即文字颜色）
            fill: new ol.style.Fill({ color: "#000000" }),
            stroke: new ol.style.Stroke({ color: "#FFFFFF", width: 1 }),
          }),
        });
        // 属性添加到Featrue
        iFeature.setStyle(newStyle);
        currPlot.value.style = null;
      }
      // 绘制cyy添加的circle
      if (iType === "circle") {
        // 获得两个控制点
        const cp1 = iData[0];
        const cp2 = iData[1];
        // 求两个点的距离(半径)--可能需要进行坐标转换，转换到3857，计算长度。（坐标转换）
        const r = plot.CalLengthOfTwoPoints(cp1, cp2);
        // 绘制圆--new Circle(center, opt_radius)
        iGeom = new geoCircle(cp1, r); // 生成圆
        iFeature = new ol.Feature(iGeom); // 生成feature
        // 需要添加控制点属性--待添加
        iFeature.set("gid", gID);
        iFeature.set("type", "PLOT");
        // 属性创建
        if (iStyle.fill === "none" || !iStyle.fill) {
          // 没有填充颜色-1
          let strokeColor = iStyle.stroke;
          if (!strokeColor) {
            // 勾边色为空，设置为当前色
            strokeColor = currColor.value;
          }
          // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
          if (
            strokeColor &&
            strokeColor !== "#003F98" &&
            strokeColor !== "#FFF000" &&
            strokeColor !== "#009944" &&
            strokeColor !== "#004097" &&
            strokeColor !== "#FF0000" &&
            strokeColor !== "#0000FF" &&
            strokeColor !== "#00FF00" &&
            strokeColor !== "#FF60AF"
          ) {
            // 有描边色
            newStyle = new ol.style.Style({
              fill: new ol.style.Fill({
                color: "rgba(0,0,0,0)",
              }),
              stroke: new ol.style.Stroke({
                color: currColor.value,
                width: iStyle.width ? iStyle.width : 0,
              }),
            });
          } else if (
            strokeColor === "#003F98" ||
            strokeColor === "#FFF000" ||
            strokeColor === "#009944" ||
            strokeColor === "#004097" ||
            strokeColor === "#FF0000" ||
            strokeColor === "#0000FF" ||
            strokeColor === "#00FF00" ||
            strokeColor === "#FF60AF"
          ) {
            // B-2 勾边为固有色，勾边色保持不变！
            newStyle = new ol.style.Style({
              fill: new ol.style.Fill({
                color: "rgba(0,0,0,0)",
              }),
              stroke: new ol.style.Stroke({
                color: strokeColor,
                width: iStyle.width ? iStyle.width : 0,
              }),
            });
          }
          currPlot.value.style = null;
        } else {
          // 多边形有填充色-2
          // 多边形有填充色，非固有色。使用当前颜色2-1
          if (
            iStyle.fill !== "#003F98" &&
            iStyle.fill !== "#FFF000" &&
            iStyle.fill !== "#009944" &&
            iStyle.fill !== "#004097" &&
            iStyle.fill !== "#FF0000" &&
            iStyle.fill !== "#0000FF" &&
            iStyle.fill !== "#00FF00" &&
            iStyle.fill !== "#FF60AF"
          ) {
            const iFill = currColor.value;
            let strokeColor = iStyle.stroke;
            const iWidth = iStyle.width;
            // 获取勾边宽度，没有或为0，表示没有勾边
            if (iWidth === 0 || !iWidth) {
              strokeColor = null;
            }
            if (!strokeColor) {
              // 勾边色为空，只有填充；无勾边 2-1-1
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
              });
            } else if (
              strokeColor &&
              strokeColor !== "#003F98" &&
              strokeColor !== "#FFF000" &&
              strokeColor !== "#009944" &&
              iStyle.fill !== "#004097" &&
              strokeColor !== "#FF0000" &&
              strokeColor !== "#0000FF" &&
              strokeColor !== "#00FF00" &&
              strokeColor !== "#FF60AF"
            ) {
              // 有描边色
              // 有描边色，且不是固有色，替换成当前色（样式：多边形有颜色-当前色，边使用当前色）2-1-2
              // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: currColor.value,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
              // 描边色是固有色，使用固有描边色（样式：多边形有颜色-当前色，边使用固有色）2-1-3
            } else if (
              strokeColor === "#003F98" ||
              strokeColor === "#FFF000" ||
              strokeColor === "#009944" ||
              strokeColor === "#004097" ||
              strokeColor === "#FF0000" ||
              strokeColor === "#0000FF" ||
              strokeColor === "#00FF00" ||
              strokeColor === "#FF60AF"
            ) {
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: strokeColor,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
            }
          } else {
            // 填充色为固有色 2-2
            const iFill = iStyle.fill;
            let strokeColor = iStyle.stroke;
            const iWidth = iStyle.width;
            // 获取勾边宽度，没有或为0，表示没有勾边
            if (iWidth === 0 || !iWidth) {
              strokeColor = null;
            }
            if (!strokeColor) {
              // 勾边色为空，只有填充；无勾边 2-2-1
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
              });
            } else if (
              strokeColor &&
              strokeColor !== "#003F98" &&
              strokeColor !== "#FFF000" &&
              strokeColor !== "#009944" &&
              strokeColor !== "#004097" &&
              strokeColor !== "#FF0000" &&
              strokeColor !== "#0000FF" &&
              strokeColor !== "#00FF00" &&
              strokeColor !== "#FF60AF"
            ) {
              // 有描边色
              // （样式：多边形有颜色-固有色，边使用当前色）2-2-2
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: currColor.value,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
              // （样式：多边形有颜色-固有色，描边使用固有色）2-2-3
            } else if (
              strokeColor === "#003F98" ||
              strokeColor === "#FFF000" ||
              strokeColor === "#009944" ||
              strokeColor === "#004097" ||
              strokeColor === "#FF0000" ||
              strokeColor === "#0000FF" ||
              strokeColor === "#00FF00" ||
              strokeColor === "#FF60AF"
            ) {
              newStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                  color: iFill,
                }),
                stroke: new ol.style.Stroke({
                  color: strokeColor,
                  width: iStyle.width ? iStyle.width : 0,
                }),
              });
            }
          }
          currPlot.value.style = null;
        }

        // 设置虚线--如果设置了style.lineDash参数需要设置虚线
        if (iStyle.lineDash) {
          const iStroke = newStyle.getStroke();
          iStroke.setLineDash(iStyle.lineDash);
        }
        // 属性添加到Featrue
        iFeature.setStyle(newStyle);
      }
      plottingLayer.getSource().addFeature(iFeature);
    }
  }
};

onMounted(() => {
  initMap();
  initPlottingLayer();
});
</script>
<template>
  <div id="map"></div>
  <div class="btns">
    <el-button type="primary" @click="lineClick">封锁区</el-button>
  </div>
</template>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100vh;
}

.btns {
  position: absolute;
  left: 40px;
  top: 20px;
}
</style>
